<template>
  <Modal
    v-model="active"
    title="选择歌单"
  >
    <List size="small">
      <ListItem>
        <ListItemMeta>
          <i
            slot="avatar"
            class="material-icons"
          >add</i>
          <div
            v-if="isNewPlEditing"
            slot="title"
          >
            <Input
              v-model="newPlTitle"
              placeholder="请输入歌单名"
              clearable
            />
            <i
              class="material-icons"
              @click="handleCancleCreatePl"
            >cancel</i>
            <i
              class="material-icons"
              @click="handleCreatePl"
            >check_circle</i>
          </div>
          <div
            v-else
            slot="title"
            @click="handleCreatePlItemClicked"
          >
            新建歌单
          </div>
        </ListItemMeta>
      </ListItem>
      <ListItem>
        <ListItemMeta
          title="我喜欢"
          @click.native="handleSelected(0)"
        >
          <i
            slot="avatar"
            class="material-icons fav"
          >favorite</i>
        </ListItemMeta>
      </ListItem>
      <ListItem
        v-for="item in playLists"
        :key="`pl-${item.id}`"
      >
        <ListItemMeta
          :title="item.title"
          @click.native.prevent="handleSelected(item.id)"
        >
          <i
            slot="avatar"
            class="material-icons"
          >queue_music</i>
        </ListItemMeta>
      </ListItem>
    </List>
    <div slot="footer">
      <Button
        type="default"
        size="large"
        long
        ghost
        @click="handleClose"
      >
        关闭
      </Button>
    </div>
  </Modal>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch, Model } from 'vue-property-decorator'
import { CreateQueryParams } from '@nestjsx/crud-request'
import { DeepPartial } from 'ts-essentials'
import { PlayList, getPlayLists, createPlayList } from '@/api/resources'

@Component({
  name: 'PlayListsSelectorModal',
  components: {}
})
export default class extends Vue {
  @Model('change', { type: Boolean }) readonly active!: boolean
  @Prop() userId!: number
  private playLists: PlayList[] = []
  private isNewPlEditing = false
  private newPlTitle = ''

  get getPlayListsParams (): CreateQueryParams {
    return {
      search: {
        'belongsToUser.id': this.userId
      },
      join: [{
        field: 'belongsToUser'
      }]
    }
  }

  @Watch('active')
  private handleActiveStateChanged (active: boolean) {
    this.$emit('change', active)
    if (active) {
      this.updatePlayListsData()
      this.$emit('on-actived')
    } else {
      this.isNewPlEditing = false
      this.$emit('on-closed')
    }
  }

  @Watch('userId')
  private handleUserIdUpdated () {
    this.updatePlayListsData()
  }

  private handleSelected (id: number) {
    this.$emit('on-selected', id)
  }

  private handleClose () {
    this.$emit('change', false)
    this.$emit('on-closed')
  }

  private handleCreatePlItemClicked () {
    this.isNewPlEditing = true
  }

  private async handleCreatePl () {
    if (this.newPlTitle === '') return
    const params: CreateQueryParams = {
      join: { field: 'belongsToUser' }
    }
    const dto: DeepPartial<Exclude<PlayList, 'id'>> = {
      title: this.newPlTitle,
      belongsToUser: {
        id: this.userId
      }
    }
    await createPlayList(dto, params)
    this.updatePlayListsData()
    this.isNewPlEditing = false
    this.newPlTitle = ''
  }

  private handleCancleCreatePl () {
    this.isNewPlEditing = false
  }

  private async updatePlayListsData () {
    const { data } = await getPlayLists(this.getPlayListsParams)
    this.playLists = data
  }
}
</script>
